Groovy Animated Sign

This recipe creates an animated sign, like you see advertising motel rates and gas prices on the interstate. (JavaScript 1.2 only!)

Discussion

This applet works by caching some images and then manipulating the document.images[] array. A recurring timer event triggers each update of the sign. The 150-position layout of each sign update is stored in an array, and a function walks through it, assigning new src property values to the elements in the image array:

function Animate()
{
    var s = seq[seqIndex++];
    var j = 1;
    if(seqIndex >= seq.length)
        seqIndex = 0;
    for(var i = 0; i < s.length;i++) {
        document.images[j++].src = tiles[s.charAt(i)].src;
    }
}

Copyright ©1998 by Charles River Media, All Rights Reserved